<template>
  <view>
    <MrCustom bg-color="bg-gradual-blue ">
      <template #full>
        <SearchInput disable></SearchInput>
      </template>
    </MrCustom>
    <HomeSwiper></HomeSwiper>
    <view class="bg-white margin radius-lg">
      <view class="cu-bar">
        <view class="action">
          <text class="cuIcon-titles text-blue"></text>
          <text class="text-xl text-bold">就医指南</text>
        </view>
      </view>
      <view class="nav-list">
        <navigator hover-class='none' :url="item.url"
                   class="nav-li" navigateTo :class="'bg-'+item.color"
                   v-for="(item,index) in elements" :key="index"
                   :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
          <view class="nav-title">{{ item.title }}</view>
          <view class="nav-name">{{ item.name }}</view>
          <text :class="'cuIcon-' + item.cuIcon"></text>
        </navigator>
      </view>
    </view>
    <view class="bg-white margin radius-lg">
      <view class="cu-bar">
        <view class="action">
          <text class="cuIcon-titles text-blue"></text>
          <text class="text-xl text-bold">热点文章</text>
        </view>
        <view class="action">
          <navigator url="/pages/common/article/list">
            <text class="text-lg text-gray">
              更多
              <text class="cuIcon-right"></text>
            </text>
          </navigator>
        </view>
      </view>
      <HomeArticle></HomeArticle>
    </view>
  </view>


  <!--  <uni-section title="维护时间提醒" type="line" titleFontSize="20">-->
  <!--    <view class="flex justify-center">-->
  <!--      <button style="width: 80vw" class="cu-btn round bg-blue margin-tb-sm lg" @click="addSchedule">添加日程</button>-->
  <!--    </view>-->
  <!--    <tui-calendar lunar isChange :status="status" @change="monthChange"></tui-calendar>-->
  <!--  </uni-section>-->


  <!--  <tui-calendar ref="calendarRef" maxDate="2023-12-31" lunar isFixed title="添加维护日程" @change="change"></tui-calendar>-->
</template>

<script setup lang="ts">
import {ref} from "vue";
import HomeSwiper from "@/pages/user/home/components/HomeSwiper.vue";
import HomeArticle from "@/pages/user/home/components/HomeArticle.vue";
import SearchInput from "@/pages/common/search/components/SearchInput.vue";
import MrCustom from "@/components/common/MrCustom.vue";

const elements = ref([
  {
    title: '实时挂号',
    name: 'appointment',
    color: 'red',
    cuIcon: 'newshot',
    url: '/pages/patient/appointment/list',
  },
  {
    title: '在线咨询',
    name: 'consult',
    color: 'orange',
    cuIcon: 'new',
    url: '/pages/patient/consult/list',
  },
  {
    title: '快速问诊',
    name: 'inquiry',
    color: 'green',
    cuIcon: 'command',
    url: '/pages/patient/inquiry/index',
  },
  {
    title: '健康档案',
    name: 'archive',
    color: 'olive',
    cuIcon: 'file',
    url: '/pages/common/archive/index',
  },
])
const calendarRef = ref()
const status = ref([])


const addSchedule = () => {
  calendarRef.value.show()
}
const change = (e: any) => {
  console.log(e)
}

const monthChange = (e: any) => {
  console.log(e)
  if (e.switch) {
    let now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth() + 1;
    let day = now.getDate() - 1;
    if (e.year == year && e.month == month) {
      let days = e.days;
      let tmp = [];
      for (let i = 0; i < days; i++) {
        let bgColor = '';
        let check = false;
        if (i <= day) {
          bgColor = i === day ? '#19be6b' : '#ff7900';
          check = i === day;
        } else {
          bgColor = '#999';
        }
        tmp.push({
          bgColor: bgColor,
          color: '#fff',
          check: check
        });
      }
      status.value = tmp;
    } else {
      status.value = [];
    }
  }
}
</script>

<style scoped>

</style>
